<template>
	<view class="container">
		<!-- 用户信息 -->
		<view class="user">
			<view class="avatar">
				<!-- #ifdef H5 || APP-PLUS -->
				<image v-if="business.avatar_text" :src="business.avatar_text"></image>
				<image v-else src="/static/logo.png"></image>
				<!-- #endif -->

				<!-- #ifdef MP-WEIXIN -->
				<image v-if="business.avatar_text" :src="business.avatar_text"></image>
				<open-data v-else type="userAvatarUrl"></open-data>
				<!-- #endif -->
			</view>

			<view class="nickname">{{ business.nickname }}</view>
		</view>

		<view class="bind">
			<u-form labelPosition="left" labelWidth="70" :model="business">

				<u-form-item label="邮箱" borderBottom>
					<u-input v-model="business.email" border="none" readonly></u-input>
				</u-form-item>

				<u-form-item label="验证码" labelWidth="80" borderBottom required>
					<u-input v-model="code" border="none"></u-input>
					<u-button slot="right" @tap="getCode" :text="tips" type="success" size="mini"
						:disabled="disabled"></u-button>
				</u-form-item>

				<u-button type="primary" text="验证" formType="submit" @click="submit"></u-button>
			</u-form>
			<u-code ref="code" @change="codeChange" :seconds="seconds"></u-code>
		</view>

		<!-- 提醒组件 -->
		<u-toast ref="notice"></u-toast>
	</view>
</template>

<script>
export default {
	onLoad(options) {
		this.business.openid = options.hasOwnProperty('openid') ? options.openid : ''
		this.business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}
	},
	data() {
		return {
			tips: '',
			code: '',
			seconds: 60,
			disabled: false,
			action: 'send',
			business: {
				email: '',
				openid: ''
			}
		}
	},
	methods: {
		codeChange(text) {
			this.tips = text;
		},
		async getCode() {
			if (this.$refs.code.canGetCode) {
				// 组装数据
				var data = {
					action: this.action,
					email: this.business.email
				}
				// 发起请求
				var result = await uni.$u.http.post('business/email', data)
				this.action = ''
				uni.showLoading({
					title: '正在获取验证码'
				})

				if (result.code == 0) {
					console.log(result.msg)
					this.$refs.notice.show({
						message: result.msg,
						type: 'error'
					})
					return false
				}

				setTimeout(() => {
					uni.hideLoading();
					// 这里此提示会被this.start()方法中的提示覆盖
					uni.$u.toast('验证码已发送');
					// 通知验证码组件内部开始倒计时
					this.$refs.code.start();
				}, 2000);
			}
		},

		async submit() {
			if (this.code) {
				this.action = ''
				// 组装数据
				var data = {
					action: this.action,
					email: this.business.email,
					code: this.code,
					busid: this.business.id
				}

				var result = await uni.$u.http.post('/business/email', data)

				if (result.code == 0) {
					this.$refs.notice.show({
						type: 'error',
						message: result.msg
					})
					return false;
				}
				this.$refs.notice.show({
					type: 'success',
					message: result.msg,
					complete: () => {
						//验证成功，设置本地存储
						uni.setStorageSync('business', result.data)
						//返回的动作
						uni.$u.route({
								type: 'navigateBack',
								delta: 1
							})
					}
				})
				return false;
			}
			this.$refs.notice.show({
				message: "请输入验证码",
				type: 'error'
			})

		}
	}
}
</script>

<style>
/* 头部 */
.user {
	width: 100%;
	padding: 40rpx 0rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: linear-gradient(rgb(1, 115, 222), rgb(78, 169, 245));
	color: white;
}

.avatar {
	width: 200rpx;
	height: 200rpx;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 15px;
}

.avatar image {
	width: 100%;
	height: 100%;
}

.notice {
	display: block;
	text-align: center;
	color: #fff;
}

/* 表单 */
.bind {
	width: 90%;
	margin: 0 auto;
}
</style>
